<template>
	<view class="page">
		<view class="wrapper">
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view
						class="cu-item flex-sub"
						:class="index==TabCur?'active cur':''"
						v-for="(item,index) in tabList"
						:key="index"
						@tap="tabSelect"
						:data-id="index">
							{{item}}
					</view>
				</view>
			</scroll-view>
			
			<view class="list" v-show="TabCur == 0">
				<view class="card" v-for="(i,k) in list0" :key="i.id">
					<view class="left">
						<view class="name">
							{{i.prize_content}}
						</view>
						<view class="time">
							时间: {{i.created_at}}
						</view>
					</view>
					<view class="right">
						<button class="cu-btn btn round" @click="receive(i.lottery_no)">领取</button>
					</view>
				</view>
			</view>
			
			<view class="list" v-show="TabCur == 1">
				<view class="card" v-for="(i,k) in list1" :key="i.id">
					<view class="left">
						<view class="name">
							{{i.prize_content}}
						</view>
						<view class="time">
							时间: {{i.updated_at}}
						</view>
					</view>
					<view class="right">
						已领取
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				tabList: ['未领取', '已领取'],
				list0: [],
				list1: []
			};
		},
		onLoad() {
			this.getList();
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			getList() {
				this.$u.get('/lottery/prize/list?type=0').then(res => {
					console.log(res)
					this.list0 = res.data.result.list
				})
				this.$u.get('/lottery/prize/list?type=1').then(res => {
					this.list1 = res.data.result.list
				})
			},
			receive(id) {
				this.$u.post('/lottery/prize/receive', {
					lottery_no: id
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					this.getList();
				})
			}
		}
	}
</script>

<style scoped>
	@import url("/colorui/main.css");

	.nav {
		background: #242644;
		color: #B9B9C1;
	}
	.nav .active {
		color: #00D388;
	}
	
	.list {
		margin-top: 60rpx;
	}
	.list .card {
		background: #141439;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.list .card .name {
		font-size: 36rpx;
		color: #fff;
		margin-bottom: 40rpx;
	}
	.list .card .time {
		font-size: 26rpx;
	}
	.list .card .right {
		padding-right: 20rpx;
	}
	.list .card .btn {
		background: #00D388;
		color: #fff;
		padding: 0 40rpx;
	}
</style>
